<ion-view cache-view="false" hide-nav-bar="{{minimal}}" style="background-color:#444444">
  <ion-nav-title>{{currentProfileName=='__reorder__'? ('kMontage' | translate) :currentProfileName}} {{currentZMGroupName}}</ion-nav-title>
  <ion-nav-buttons side="left">
    <button id="montage-move-1" class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
    &nbsp;
    <button ng-if="!$root.LoginData.isKiosk" class="button button-icon button-clear ion-eye" ng-click="hideUnhide();">&nbsp;
    </button>
    <button  id="montage-move-2" class="button button-icon button-clear ion-chevron-down"
      ng-click="toggleSubMenuFunction();">&nbsp;
    </button>

    <button ng-if="$root.LoginData.isKiosk" class="button button-icon button-danger ion-locked" style="color:red !important">
    </button>

    <button data-badge="{{$root.alarmCount}}"
      class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge"
      ng-click="handleAlarms();" ng-if="$root.isAlarm && !$root.LoginData.isKiosk"></button>
  </ion-nav-buttons>
  <ion-nav-buttons side="right">
    <span ng-click="toggleTimeType()" class="icon montage-time">
      <i ng-class="(iconTimeNow=='server')?'icon-server':'ion-ios-location'"></i>
      {{timeNow}}&nbsp;</span>
    <button ng-if="!$root.LoginData.isKiosk" class="button button-icon button-clear ion-arrow-move" ng-click="dragToggle();">&nbsp;
    </button>
    <!--
        <button class="button button-icon button-clear ion-monitor" ng-click="cast();">&nbsp;
        </button>
        -->
    <button ng-if="!$root.LoginData.isKiosk" id="montage-move-3" class="button button-icon button-clear ion-grid" ng-click="resetSizesWithInput();">&nbsp;
    </button>
    <button class="button button-icon button-clear ion-android-contract" ng-click="switchMinimal()">
    </button>
  </ion-nav-buttons>
  <ion-content ng-cloak has-bouncing="false" style="background-color:#444444" delegate-handle="montage-delegate"
    overflow-scroll="false" padding="false" class="notch-ready">

    <div ng-if="areImagesLoading" class="screen-note">&nbsp;{{ 'kArrangingImages' | translate }}...&nbsp;</div>
    <div ng-if="!minimal && toggleSubMenu">
      <!-- this is header -->
      <br />
      <div id="flyoutmenu" style="float:left">
        <ul>
          <!-- 
            <li> <a href="" ng-click="killAllImages()"> <i class="ion-ionic"></i></a></li>
          -->
          <li ng-if="zmGroups.length">
            <a  ng-click="selectZMGroup()">
              <i class="ion-folder"></i>
            </a>
          </li>                    
          <li ng-if="!$root.LoginData.isKiosk">
            <a id="montage-move-4" ng-click="sliderChanged(1)">
              <i class="ion-plus-circled"></i>
            </a>
          </li>
          <li ng-if="!$root.LoginData.isKiosk">
            <a id="montage-move-5" ng-click="sliderChanged(-1)">
              <i class="ion-minus-circled"></i>
            </a>
          </li>
          <li>
            <a id="montage-move-6" ng-click="squeezeMonitors()">
              <i class="ion-arrow-shrink"></i>
            </a>
          </li>

          <li ng-if="!$root.LoginData.isKiosk">
            <a  ng-click="clearAllEvents()">
              <i class="ion-checkmark"></i>
            </a>
          </li>

          <li ng-style="{'background-color': isCycleOn()?'rgba(69, 170, 242,0.7)':'rgba(108, 122, 137, 0.7)'}"
            ng-if="!isDragabillyOn">
            <a ng-click="toggleCycle()">
              <i class="ion-android-bicycle"></i></a>
          </li>

          <li ng-if="isDragabillyOn">
            <a ng-click="hideMonitor(monitor.Monitor.Id)">
              <i class="ion-close-circled"></i>
            </a>
          </li>
          <li ng-if="isDragabillyOn">
            <a ng-click="toggleStamp()">
              <i class="ion-pin"></i>
            </a>
          </li>

          <li>
            <a href="" ng-click="switchMontageProfile()">
              <i class="ion-navicon-round"></i>
            </a>
          </li>

          <li ng-if="!$root.LoginData.isKiosk">
            <a href="" ng-click="saveMontageProfile()">
              <i class="ion-heart"></i>
            </a>
          </li>

          <li ng-if="!$root.LoginData.isKiosk">
            <a href="" ng-click="deleteMontageProfile()">
              <i class="ion-trash-a"></i>
            </a>
          </li>

        </ul>
      </div>

   
      <div style="clear: both;"></div>

      <br />
    </div>
    <!-- now lets draw the montage windows -->
    <div class="grid" id="mygrid">
      <div class="grid-sizer"></div>
      <!-- <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" 
                  ng-if="monitor.Monitor.Function!='None' &&  monitor.Monitor.Enabled !='0' ">-->



      <span ng-repeat="monitor in MontageMonitors | onlyEnabled |limitTo: monLimit">
        <!--<div class="grid-item grid-item-{{monitor.Monitor.gridScale}} " data-item-id="{{monitor.Monitor.Id}}"
          data-item-size="{{monitor.Monitor.gridScale}}" data-item-listdisplay="{{monitor.Monitor.listDisplay}} ">-->

          <div class="grid-item" data-item-id="{{monitor.Monitor.Id}}" ng-style="{'width': monitor.Monitor.gridScale + '%'}"
          data-item-size="{{monitor.Monitor.gridScale}}" data-item-listdisplay="{{monitor.Monitor.listDisplay}} " ng-show="monitor.Monitor.listDisplay!='noshow'">
          <div class="row row-no-padding">
            <div ng-class="monitor.Monitor.showSidebar?'col col-70 col-no-padding':'col col-no-padding'">
              <figure role="group" class="{{dragBorder}}" ng-show="monitor.Monitor.listDisplay!='noshow'">
                 <div class="montage-image">
                  <div ng-if="LoginData.enableMontageOverlays && !$root.LoginData.isKiosk" class="montage-buttons">
                    <a ng-if="monitor.Monitor.lastEvent" class="button button-small button-assertive icon ion-ios-bell"
                      ng-click="eventButtonClicked(monitor, true)"></a>&nbsp;&nbsp;<a ng-if="monitor.Monitor.lastEvent"
                      class="button button-small button-balanced icon ion-checkmark"
                      ng-click="eventButtonClicked(monitor, false)"></a>
                  </div>


                  <a ng-if="LoginData.enableMontageOverlays && monitor.Monitor.Function !='None' && monitor.Monitor.Enabled != '0' && monitor.Monitor.Function != 'Monitor'"
                    ng-class="monitor.Monitor.showSidebar ? 'montage-sidebar-button button button-small button-light icon ion-chevron-left':'montage-sidebar-button button button-small button-light icon ion-chevron-right' "
                    ng-click="toggleSidebar(monitor)"></a>


                  <img class="{{monitor.Monitor.selectStyle}}" id="img-{{$index}}"
                    image-spinner-src="{{constructStream(monitor)}}"
                    ng-click="!isDragabillyOn?openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey,monitor):toggleSelectItem(monitor.Monitor.Id);"
                    image-spinner-loader="lines"
                    img-spinner-w="{{monitor.Monitor.Width}}"
                    img-spinner-h="{{monitor.Monitor.Height}}"
                    image-on-error="processImageError(monitor);" />
                </div>

                <figcaption ng-if="!LoginData.montageHideFooter" id="slowpulse"
                  ng-class="monitor.Monitor.isAlarmed==true?'alarmed-figcaption animated infinite flash':'normal-figcaption'">
                  &nbsp;

                  <span ng-if="monitor.Monitor.isStamp && isDragabillyOn">
                    <i class="animated infinite flash ion-pin"></i>&nbsp;</span>
                  <i ng-if="monitor.Monitor.streamState=='bad'" class="animated infinite flash ion-alert-circled assertive"></i>
                  <i class="ion-ios-videocam"></i>&nbsp; {{monitor.Monitor.Name}}&nbsp;
                
                </figcaption>

              </figure>
            </div>
            <div ng-if="monitor.Monitor.showSidebar" class="col col-30 col-no-padding "
              style="background:rgba(10, 61, 98,0.3)">
              <!--sidebar details-->

              <img class="img-fluid" 
                image-spinner-src="{{constructEventThumbnail(monitor) }}" image-spinner-loader="lines"
                img-spinner-w="{{monitor.Monitor.Width}}" img-spinner-h="{{monitor.Monitor.Height}}"
                image-on-error="processImageError(monitor);" ng-click="showEvent(monitor)" />



            </div>
          </div>
          <div ng-if="monitor.Monitor.showSidebar" class="montage-sidebar ">

           
            <div ng-if="!monitor.Monitor.lastEvent">
              <div class="row row-no-padding">
                  <div class="col col-no-padding">
                        <a class="button button-small button icon ion-thumbsup" 
                        ng-click="eventButtonClicked(monitor, true)"> {{'kMontageEventCaughtUp' | translate}} </a>
                  </div>
                 
            </div>  
            </div>
            <div ng-if="monitor.Monitor.lastEvent">
              <div class="row row-no-padding">
                <i class="ion-ios-bell"></i>&nbsp;{{monitor.Monitor.lastEvent.pagination.count}}
                {{'kMontageEventUnseenCount' | translate}}
              </div>
              <div class="row row-no-padding">
                <i class="ion-ios-calendar-outline"></i>&nbsp;{{'kMontageEventLatest' | translate}}: eid:{{monitor.Monitor.lastEvent.events[0].Event.Id}} ({{humanizeTime(monitor.Monitor.lastEvent.events[0].Event.StartTime)}}) <br />
              </div>
              <div class="row row-no-padding">
                <i class="ion-clipboard"></i>&nbsp; <span ng-class="{'object-notes': monitor.Monitor.lastEvent.object}">{{monitor.Monitor.lastEvent.events[0].Event.Notes}}</span><br />
              </div>

            </div>
            <div class="row row-no-padding">
              <i class="ion-social-buffer"></i>&nbsp;{{'kMontageEventStorage' | translate }}:
              {{formatBytes(monitor.Monitor.TotalEventDiskSpace,1)}}
            </div>


          </div>
        </div>


    </div>
    </span>
    <!-- ngrepeat -->
    </div>
    <ion-item style="background-color:#444444; color:#fff;border:none;" ng-show="!MontageMonitors.length">
      {{'kNoMonitors' | translate}}
    </ion-item>
  </ion-content>
  <div class="bwmode" ng-if="$root.runMode=='lowbw'">
    {{ 'kLowBWDisplay' | translate }}
  </div>
  <div ng-show="minimal">
    <nav mfb-menu position="bl" effect="zoomin" label="{{'kCollapse' | translate}}" active-icon="ion-chevron-down"
      resting-icon="ion-chevron-up" toggling-method="click">
      <button ng-if="!$root.LoginData.isKiosk" mfb-button icon="ion-plus" label="{{'kIncreaseSize' | translate}}" ng-click="sliderChanged(1)">
      </button>
      <button ng-if="!$root.LoginData.isKiosk" mfb-button icon="ion-minus" label="{{'kDecreaseSize' | translate}}" ng-click="sliderChanged(-1)">
      </button>
      <!-- <button mfb-button icon="ion-refresh" label="{{'kRefresh' | translate}}" ng-click="resetSizes();">
            </button>-->
  
      <button mfb-button icon="ion-arrow-shrink" label="{{'kReflow'| translate}}" ng-click="squeezeMonitors()">
      </button>
  <!--
      <button mfb-button icon="ion-grid" label="{{'kArrange'| translate}}" ng-click="resetSizesWithInput()">
      </button>
    -->
      <button mfb-button icon="ion-close" label="{{'kExitFullScreen'| translate}}" ng-click="switchMinimal()">
      </button>

    </nav>
    <span ng-if="!$root.LoginData.isKiosk" class="modal-alarm-badge">
      <a data-badge="{{$root.alarmCount}}"
        class="animated infinite tada button icon  ion-ios-bell notification-badge button-assertive"
        ng-click="handleAlarmsWhileMinimized();" ng-if="$root.isAlarm"></a>
    </span>
  </div>
  <br />
</ion-view>
